import THREE, { AmbientLight, AxesHelper, EventDispatcher, Mesh, CircleGeometry, MeshBasicMaterial, PerspectiveCamera, PointLight, Scene, Vector2, Vector3, WebGLRenderer, GridHelper, DoubleSide } from "three";
import elementResizeEvent from "element-resize-event";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

export default class RingChart3d extends EventDispatcher {
    controls!: OrbitControls;
    // 渲染器
    private renderer = new WebGLRenderer({
        alpha: true,// 透明背景
        antialias: true, // 阴影抗锯齿
        precision: "highp", //precision:highp/mediump/lowp着色精度选择
        logarithmicDepthBuffer: false, // 对数深度缓冲区 避免当2个面完全重合时闪烁
        preserveDrawingBuffer: false, // 是否保存绘图缓冲
        stencil: false, // 模版
    });

    private camera = new PerspectiveCamera(75, 1, 0.01, 2000);
    private scene = new Scene();

    constructor(div: HTMLDivElement) {
        super();
        this.init(div);
    }

    init(div: HTMLDivElement) {

        const canvas = div.getElementsByTagName("canvas");
        for (let c of canvas) c.remove();

        div.append(this.renderer.domElement);
        this.renderer.setClearColor("#ffffff");

        elementResizeEvent(div, () => {
            console.log('this');

            let rect = window.getComputedStyle(div);
            let width = parseInt(rect.width);
            let height = parseInt(rect.height);
            this.resize(width, height);
        });

        let rect = window.getComputedStyle(div);
        let width = parseInt(rect.width);
        let height = parseInt(rect.height);
        this.resize(width, height);
        this.renderer.setPixelRatio(window.devicePixelRatio);
        this.renderer.localClippingEnabled = true;
        this.camera.position.set(0, 4, -10).setLength(10);
        this.camera.lookAt(new Vector3(0, 0, 0));
        this.camera.lookAt(new Vector3(0, 0, 0));
        this.add()
        const gridHelper = new GridHelper(10, 10, "#555", "#333");
        gridHelper.position.set(0, -0.1, 0);
        this.scene.add(gridHelper);
        this.scene.add(new AxesHelper(128));

        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
        this.controls.enablePan = false;
        this.controls.addEventListener("change", () => {
            console.log(12312);

            this.renderer.render(this.scene, this.camera);
        });

        this.scene.add(new AmbientLight("#fff", 0.4));

        const pointLight = new PointLight("#fff", 1);
        pointLight.position.set(0, 10, -10);
        this.scene.add(pointLight);

        const pointLight1 = new PointLight("#fff", 1);
        pointLight1.position.set(0, 2, 7);
        this.scene.add(pointLight1);
    }

    add() {

        var geometry = new CircleGeometry(1, 32, 0, 1);
        var material;

        material = new MeshBasicMaterial({ color: 0xff0000, side: DoubleSide });
        var section1 = new Mesh(geometry, material);
        section1.rotation.set(-Math.PI / 2, 0, 0);

        material = new MeshBasicMaterial({ color: 0x00ff00, side: DoubleSide });
        var section2 = new Mesh(geometry, material);
        section2.rotation.set(-Math.PI / 2, 0, Math.PI / 2);

        material = new MeshBasicMaterial({ color: 0x0000ff, side: DoubleSide });
        var section3 = new Mesh(geometry, material);
        section3.rotation.set(-Math.PI / 2, Math.PI / 2, Math.PI / 2);

        material = new MeshBasicMaterial({ color: 0xffff00, side: DoubleSide });
        var section4 = new Mesh(geometry, material);
        section4.rotation.set(-Math.PI / 2, Math.PI / 2, 0);

        this.scene.add(section1);
        this.scene.add(section2);
        this.scene.add(section3);
        this.scene.add(section4);

    }

    // 调整尺寸的方法
    private resize(width: number, height: number) {
        this.camera.aspect = width / height;
        this.camera.updateProjectionMatrix();
        this.renderer.setPixelRatio(window.devicePixelRatio);
        this.renderer.setSize(width, height);

    }

    animate() {
        requestAnimationFrame(this.animate.bind(this));
        this.renderer.render(this.scene, this.camera);
    }

}